<template>
  <components :is="componentType" class="song-item" @click="$emit('select')">
    <div class="index" v-if="hasNumber">
      <span v-if="isRank && index <= 3" :class="'rank'+index" />
      <span v-else class="nums" v-text="index" />
    </div>
    <div class="content" :class="{'padding-left': !hasNumber}">
      <div class="name">{{data.name}}</div>
      <div class="desc">{{formatSinger}}</div>
    </div>
    <div class="operation" v-if="hasOperation" @click.stop="$emit('open')">
      <icon-svg icon-class="gengduoxiao" />
    </div>
  </components>
</template>

<script>
export default {
  name: 'SongItem',
  props: {
    componentType: {
      type: String,
      default: 'div'
    },
    isRank: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    data: {
      type: Object,
      default () {
        return {
          id: 0,
          name: '',
          singer: [],
          image: '',
          url: ''
        }
      }
    },
    hasNumber: {
      type: Boolean,
      default: true
    },
    hasOperation: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    formatSinger () {
      return this.data.singer.map((item, index) => item.name).join('/')
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .song-item {
    height: 64px;
    display: flex;
    align-items: center;
    .index {
      width: 25px;
      padding: 0 14px;
      color: @color-theme;
      font-size: @font-size-medium-x;
      .rank1, .rank2, .rank3 {
        display: inline-block;
        width: 25px;
        height: 24px;
        background-size: 25px 24px;
      }
      .rank1 { background-image: url("../../../static/img/No.1.png") }
      .rank2 { background-image: url("../../../static/img/No.2.png") }
      .rank3 { background-image: url("../../../static/img/No.3.png") }
    }
    .content {
      height: inherit;
      flex: 1;
      text-align: left;
      overflow: hidden;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .name, .desc { .no-wrap() }
      .name {
        font-size: @font-size-medium-x;
        color: @color-text;
        line-height: @font-size-large-x;
      }
      .desc {
        font-size: @font-size-small;
        color: @color-text-d;
        line-height: @font-size-large;
      }
    }
    .operation {
      width: 25px;
      padding: 0 12px;
      .icon-svg { font-size: 25px }
    }
  }

</style>
